<!--
 * @Author: egg1bro
 * @Date: 2023-01-08 13:18:23
 * @LastEditTime: 2023-01-09 00:50:58
 * @LastEditors: egg1bro
 * @Description: 
 * @FilePath: \team-graduation-design\src\views\personInfo\chooseSex.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
    <div class="page">
        <!-- 导航栏 -->
        <div class="nav">
            <van-nav-bar title="性别修改">
                <template #left>
                    <van-icon name="arrow-left" size="20" color="#3c3c3c" @click="goPersonInfo" />
                </template>
                <template #right>
                    <span class="right_text" @click="submitSex">确定</span>
                </template>
            </van-nav-bar>
        </div>
        <!-- 选择单元格 -->
        <div class="cell">
            <van-cell-group>
                <van-cell @click="chooseMale">
                    <template #title>
                        <div class="title" ref="male">男</div>
                    </template>
                    <template #right-icon>
                        <van-icon name="success" class="success-icon" v-show="number == 0" color="#4b6cb6" size="20" />
                    </template>
                </van-cell>
                <van-cell @click="chooseFemale">
                    <template #title>
                        <div class="title" ref="female">女</div>
                    </template>
                    <template #right-icon>
                        <van-icon name="success" class="success-icon" v-show="number == 1" color="#4b6cb6" size="20" />
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUpdateUserInfo } from '@/stores/updateUserInfo'

// 实例化路由
const router = useRouter()
// 实例化仓库
const updateUserInfo = useUpdateUserInfo()
const { getUpdateUserSex } = updateUserInfo

const number = ref(0)
const male = ref(null)
const female = ref(null)
const sex = ref("男")
// 选择男
const chooseMale = () => {
    number.value = 0
    sex.value = male.value.innerHTML
    console.log(sex.value);
}

// 选择女
const chooseFemale = () => {
    number.value = 1
    sex.value = female.value.innerHTML
    console.log(sex.value);
}

// 跳转到personInfo界面
const goPersonInfo = () => {
    router.push('/personInfo')
}

// 提交性别
const submitSex = async () => {
    try {
        await getUpdateUserSex({ user_sex: sex.value })
    } catch (error) {
        return Promise.reject(error)
    }
}


</script>

<style lang="less" scoped>
.page {
    width: 100%;
    height: 100%;
    background-color: #f5f6f8;
    // 此处写fixed才能应用到当前页面公共背景颜色
    position: fixed;
}

.nav {
    .right_text {
        color: #4d8fe3;
    }
}

.cell {
    .title {
        margin-left: 4px;
    }
}
</style>